<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>北京甜馨科技</title>
    <link rel="stylesheet" href="../../css/news.css?v=1.0.1">
    <link rel="stylesheet" href="../../css/aui_font.css">
    <link rel="stylesheet" href="../../css/base_icon.css?v=1.0.1">
    <link rel="stylesheet" href="../../css/frame0.css?v=1.0.1">
    <style>
        html,
        body {
            background: #eee;
            ;
        }

        header {
            background: #fff;
        }

        header .aui-iconfont {
            font-size: 20px;
            /* font-weight: bold; */
        }

        header .head {
            padding: 5px;
        }

        header .title {
            font-size: 14px;
            background: #eee;
            width: calc(76vw - 5px);
            margin-right: 5px;
            padding: 5px;
            border-radius: 3px;
        }

        header .title input {
            width: 100%;
        }

        header .more {
            font-size: 14px;
            background: #673AB7;
            color: #fff;
            padding: 3px 5px;
            border-radius: 3px;
        }

        header .more,
        .back {
            width: 10vw;
            text-align: center;
        }

        .wrap .more.active {
            color: #673AB7;
        }
    </style>
</head>

<body class="body">
    <div id="view" v-cloak>
        <header>
            <div class="head flex-bt">
                <div class="back"  onclick="_closeToWin()"><i class="aui-iconfont aui-icon-left"></i></div>
                <div class="title flex">
                    <i style="font-size: 14px;margin-right: 5px;" class="aui-iconfont aui-icon-search"></i>
                    <input type="search" placeholder="请输入关键词搜索">
                </div>
                <div class="more"  onclick="_key()">搜索</div>
            </div>
        </header>

        <ul class="wrap w-bg">
            <li class="list" v-for="(x, index) in ffList" @click="goUserInfo(x)">
                <div class="content-wrap">
                    <div class="tx img-h">
                        <img :src="imgurl+x.user_head" @load="imgCss(imgurl+x.user_head, $event)" onerror="this.onerror=null;this.src='../../image/touxiang.png'" alt="">
                        <span class="img-tag flex">
                            <!-- <i class="aui-iconfont aui-icon-image" style="font-size: 12px;margin-right: 3px;"></i> -->
                            <span class="img-num">{{x.imgcount || 0}}</span>
                        </span>
                    </div>
                    <div class="content">
                        <div class="name-wrap flex">
                            <span class="name">{{ x.user_name}}</span>
                            <span class="girl-tag tag" v-if="x.nvshen == 1"></span>
                            <span class="real-tag tag" v-if="x.is_identity_authentication == 2"></span>
                            <span class="vip-tag tag" v-if="x.is_vip >0"></span>
                        </div>
                        <div class="tag-wrap flex-w">
                            <span class="tag">{{ x.city || '未知' }}</span>
                            <span class="tag">{{x.user_age ?  x.user_age+'岁' : '未设置'}}</span>
                            <span class="tag">{{ x.occupation || '未设置' }}</span>
                            <span class="tag area-tag"><i class="base-icon juli-icon"></i><span>{{ x.user_distance || '未知' }}</span></span>
                            <span class="tag area-tag" :class="{'online-tag': x.last_login_datetime=='在线'}" >{{x.last_login_datetime}}</span>
                        <!-- <span class="tag online-tag" v-if="x.is_online == 1">在线</span> -->
                            <span class="tag money-tag" v-if="x.img_auth == 1"><i
                                    class="base-icon index-hb-icon"></i><span>付费相册</span></span>
                            <span class="tag lock-tag" v-if="x.img_auth == 2"><i
                                    class="base-icon index-lock-icon"></i><span>申请浏览</span></span>
                        </div>
                    </div>
                </div>
                <span class="more" :class="{'active': x.love == 1}" @click.stop @click="sc(x.user_id, index);">
                    <i class="aui-iconfont aui-icon-star"></i>
                </span>
                <!-- <span class="more" @click.stop="_more();">
                    <i class="aui-iconfont aui-icon-more"></i>
                </span> -->
            </li>
        </ul>
        <div id="no_more"></div>
    </div>
</body>
<script src="../../script/jquery_min.js"></script>
<script src="../../script/ffkj.js?v=1.0.1"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/wximg.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
        },
        methods: {
            // 跳转 查看用户详情
            goUserInfo: function (data) {
                go_userInfo(data.user_id, data.user_name, data.user_sex)
            },
            // 收藏
            sc: function (uid, index) {
                var _this = this;
                var status = _this.ffList[index].love;
                var url = status == 0 ? 'attention_user.php' : 'cancel_attention.php';
                _ajax(url, function (ret, err) {
                    _log(JSON.stringify(ret))
                    _log(JSON.stringify(err))
                    if (ret && ret.code == 200) {
                        var msg = status == 0 ? '收藏成功' : '取消收藏成功';
                        _msg(msg);
                        pushMsg(uid);
                        _this.ffList[index].love = status == 0 ? 1 : 0;
                    }
                }, {
                    user_id: myuserid,
                    to_user: uid,
                })
            },

            _url: function (param, url) {
                _url(param, url);
            },
            // 图片自适应
            imgCss: function (url, event) {
                var e = event.currentTarget;
                imgCss(url, function (w, h) {
                    if (w < h) {
                        $(e).parent().addClass('img-w').removeClass('img-h');
                    }
                })
            },
        }
    })
    judgeLogin()
    // 回车搜索
    window.onkeydown = function (e) {
        if (e.keyCode == 13) {
            _key();
        }
    }
    var param = {
        user_id: myuserid,
        name: '',
        longitude: getCookie('lon'),
        latitude: getCookie('lat')
    };
   

    _scrollToBottom(function () {
        if (heigutgao == 1) {
            pagenum++;
            _lists('search_user_by_name.php', pagenum, '', param);
        }
    })

    // 搜索
    function _key() {
        var keyword = $.trim($('.title input').val());
        if (!keyword) {
            _msg('请输入关键字搜索');
            return;
        }
        param.name = keyword;
        _lists('search_user_by_name.php', 0, 1, param);
    }
</script>

</html>